<template>
  <view class="home-header">
    <view class="header-content">
      <text class="logo-text">logo</text>
    </view>
    <view class="nav-menu">
      <view 
        class="menu-item" 
        v-for="(item, index) in menuList" 
        :key="index"
        @tap="handleNavClick(item)"
      >
        <image class="icon" :src="item.icon" mode="aspectFit" />
        <text class="text">{{ item.text }}</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'HomeHeader',
  data() {
    return {
      menuList: [
        { icon: '/static/img/首页.png', text: '新人专区' },
        { icon: '/static/img/首页.png', text: '赚积分' },
        { icon: '/static/img/首页.png', text: 'TEA+1' },
        { icon: '/static/img/首页.png', text: '代理申请' },
        { icon: '/static/img/首页.png', text: '品鉴分享' }
      ]
    }
  },
  methods: {
    handleNavClick(item) {
      uni.navigateTo({
        url: item.path || '/pages/index/index'
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.home-header {
  background: #fff;
  border-radius: 20rpx;
  margin: 20rpx;
  padding: 30rpx 20rpx;
  border: 1px solid #f37021;
  .header-content {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-bottom: 30rpx;
    height: 200rpx;
    .logo-text {
      color: #333;
      font-size: 32rpx;
    }
  }

  .nav-menu {
    display: flex;
    justify-content: space-between;
    
    .menu-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      
      .icon {
        width: 50rpx;
        height: 50rpx;
        margin-bottom: 10rpx;
      }
      
      .text {
        font-size: 24rpx;
        color: #333;
      }
    }
  }
}
</style> 